<template>
  <div :class="['header', {'fixed':fixed}]">
    <!-- <div class="placeholder" /> -->
    <div class="content">
      <div class="h-slot">
        <div v-if="arrow" class="h-icon" @click.stop="clickHandle">
          <svg-icon icon-class="xiangzuo" />
        </div>
        <div v-if="!showSearch" class="header-name">帮助中心</div>
        <SearchInput v-else ref="searchInput" v-model="searchValue" :focus="focus" :class="['bg-search-input', {'arrow': arrow}]" v-on="$listeners" />
      </div>
      <MoreClose />
    </div>
  </div>
</template>
<script>
import SearchInput from '@/components/SearchInput'
import MoreClose from '@/components/MoreClose'
export default {
  name: 'Header',
  components: {
    SearchInput,
    MoreClose
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    focus: {
      type: Boolean,
      default: false
    },
    fixed: {
      type: Boolean,
      default: false
    },
    arrow: {
      type: Boolean,
      defalut: false
    },
    showSearch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      searchValue: ''
    }
  },
  watch: {
    value: {
      handler(v) {
        this.searchValue = v
      },
      immediate: true
    },
    searchValue: {
      handler(v) {
        this.$emit('input', v)
      },
      immediate: true
    }
  },
  methods: {
    blur() {
      this.$refs.searchInput.blur()
    },
    getFocus() {
      this.$refs.searchInput.getFocus()
    },
    clickHandle() {
      // this.$store.commit('nav/clearNavData')
      if (this.$route.name === 'HelpCenterIndex') {
        this.$router.go(-1)
        return
      }
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped>
.fixed{
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.header{
  background-color: #00c8b4;
  .placeholder{
    height: 44PX;
  }
  .header-name{
    padding: 0 10PX 0 5PX;
    font-size: 16PX;
    font-weight: bold;
    color: #fff;
  }
  .content{
    padding: 0 12PX;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44PX;
    .h-slot{
      flex: 1 1 auto;
      padding-right: 20PX;
      display: flex;
      align-items: center;
      .h-icon{
        margin-left: -5PX;
        flex: 0 0 24PX;
        font-size: 24PX;
        color: #fff;
        line-height: 1;
        .svg-icon{
          font-size: 24PX;
        }
      }
    }
  }
  .bg-search-input{
    flex: 1 1 251px;
  }
  .arrow{
    flex: 1 1 229px;
  }
}
</style>
